{% extends "admin/layout.html" %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h4>评价任务: {{ task.name }}</h4>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('jira.rate_task', task_id=task.id) }}">
            <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">

            <div class="mb-4">
                <h6>任务详情</h6>
                <div class="card mb-3">
                    <div class="card-body">
                        <h5>{{ task.title }}</h5>
                        <p class="text-muted">{{ task.description or '无描述' }}</p>
                        <div class="d-flex justify-content-between">
                            <span>负责人: {{ task.assignee.name }}</span>
                            <span>完成时间: {{ task.completed_at.strftime('%Y-%m-%d') }}</span>
                        </div>
                    </div>
                </div>

                <label class="form-label">任务评分 (1-5星) *</label>
                <div class="rating-stars">
                    {% for i in range(5, 0, -1) %}
                    <input type="radio" id="star{{i}}" name="rating" value="{{i}}" required
                           {% if task.rating == i %}checked{% endif %}>
                    <label for="star{{i}}" title="{{i}}星"></label>
                    {% endfor %}
                </div>
                <small class="text-muted">请根据任务完成质量进行评分</small>
            </div>

            <div class="mb-3">
                <label class="form-label">评价反馈 *</label>
                <textarea name="feedback" class="form-control" rows="5" required>{{ task.feedback or '' }}</textarea>
                <small class="text-muted">请详细描述任务完成情况，包括优点和改进建议</small>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button type="submit" class="btn btn-primary">提交评价</button>
                <a href="{{ url_for('jira.project_detail', project_id=project.id) }}"
                   class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.rating-stars {
    display: inline-block;
    unicode-bidi: bidi-override;
    direction: rtl;
    font-size: 2rem;
}
.rating-stars input {
    display: none;
}
.rating-stars label {
    color: #ddd;
    padding: 0 5px;
    cursor: pointer;
}
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label {
    color: gold;
}
</style>
{% endblock %}